<template>
  <div class="h-[37vh]">
    <CommonCard title="设备佩戴统计">
      <template #content>
        <div class="text-[14px] leading-[26px] h-full overflow-auto">
          <div class="w-full bg-[#004094] flex text-center">
            <div class="w-[10%] border-r border-[#040c28]">排序</div>
            <div class="w-[20%] border-r border-[#040c28]">用户统计</div>
            <div class="w-[12%] border-r border-[#040c28]">预警次数</div>
            <div class="w-[17%] border-r border-[#040c28]">佩戴天数</div>
            <div class="w-[16%] border-r border-[#040c28]">绑定设备</div>
            <div class="w-[25%] border-r border-[#040c28]">最近使用时间</div>
          </div>
          <div
            class="w-full bg-[#1d2844] even:bg-[#0f1c39] flex text-center"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <div class="w-[10%] border-r border-[#040c28]">{{ index + 1 }}</div>
            <div class="w-[20%] border-r border-[#040c28]">{{ item.name }}</div>
            <div class="w-[12%] border-r border-[#040c28]">{{ item.warningCount }}</div>
            <div class="w-[17%] border-r border-[#040c28]">{{ item.wearDays }}</div>
            <div class="w-[16%] border-r border-[#040c28]">{{ item.deviceName }}</div>
            <div class="w-[25%] border-r border-[#040c28]">{{ item.lastUseTime }}</div>
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>
<script lang="ts" setup>
import { selectDevice } from '@/api/home'
import CommonCard from '@/components/CommonCard.vue'
import { useCommonStore } from '@/stores/common'
import { timeNum } from '@/utils/commonFn'
import { onMounted, onUnmounted, ref, watch } from 'vue'
const tableData = ref<CommonTypes.selectDeviceDatum[]>([])
const timer = ref()
const formData = ref({
  institutionId: sessionStorage.getItem('institutionId')
})
watch(
  () => useCommonStore().institutionId,
  (value) => {
    formData.value.institutionId = value
    getInfo()
  }
)
const getInfo = async () => {
  const res: any = await selectDevice(formData.value)
  tableData.value = res.data
}
onMounted(() => {
  getInfo()
  timer.value = setInterval(() => {
    getInfo()
  }, timeNum)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped></style>
